<template>
    <div class="user-home">
        <!-- 用户信息 -->
        <div class="user-info">
            <div class="info">
                <img v-if="userBasicInfo && userBasicInfo.avatar" class="avatar" :src="userBasicInfo.avatar" />
                <img v-else class="avatar" src="https://static.playground.forzoom.tech/meta/zhuyintiancheng/user.png" />
                <!-- 有信息情况下 -->
                <div class="name normal-text">
                    <div>
                        {{userBasicInfo.nickname ? userBasicInfo.nickname : userBasicInfo.name ? userBasicInfo.name : '用户未授权'}}
                    </div>
                </div>
            </div>
            <!-- 更新用户信息 -->
            <div class="updateUserInfo" v-if="userBasicInfo && userBasicInfo.avatar && userBasicInfo.nickname">
                <!-- bind-popup__btn btn btn-mobile btn-primary btn-large -->
                <wx-component behavior="button"
                    class="updateUserInfo_btn"
                    @click="onGetUserInfo" open-type="getUserInfo">
                    更新信息
                </wx-component>
            </div>
            <button v-if="!userBasicInfo || !userBasicInfo.avatar || !userBasicInfo.nickname"
                class="btn btn-mobile btn-large btn-primary-white btn-round btn-login"
                @click="onClickLogin">
                点击登录
            </button>
        </div>
        <!-- <div class="order-wrap text-center clearfix normal-text">
            <div class="status-item" @click="onClickOrder('all')">
                <span class="icon primary-color">&#xe611;</span>
                <div class="label">所有订单</div>
            </div>
            <div class="status-item" @click="onClickOrder('init')">
                <span v-if="initOrderCount > 0" class="status-item__dot"></span>
                <span class="icon yellow">&#xe60f;</span>
                <div class="label">待支付</div>
            </div>
            <div class="status-item" @click="onClickOrder('paid')">
                <span class="icon yellow">&#xe612;</span>
                <div class="label">已支付</div>
            </div>
            <div class="status-item" @click="onClickOrder('finish')">
                <span class="icon yellow">&#xe639;</span>
                <div class="label">已完成</div>
            </div>
            -- <div class="status-item" @click="onClickOrder('paid')">
                <span class="icon yellow">&#xe77d;</span>
                <div class="label">售后</div>
            </div> -
        </div> -->
        <div class="order_box text-normal" >
            <div class="item_3 border_right_gray" @click="onClickOrder('init')">
                <div class="icon_img_box">
                    <div class="dot" v-if="userBasicInfo.order_num.init > 0">{{userBasicInfo.order_num.init}}</div>
                    <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/noPayment.png" class="icon_img icon_img_margin_b" alt="" />
                </div>
                <div class="text">待支付</div>
            </div>
            <div class="item_3 border_right_gray" @click="onClickOrder('paid')">
                <div class="icon_img_box">
                  <div class="dot" v-if="userBasicInfo.order_num.paid > 0">{{userBasicInfo.order_num.paid}}</div>
                  <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/okPayment.png" class="icon_img" alt="" />
                </div>
                <div class="text">已支付</div>
            </div>
            <div class="item_3 border_right_gray"  @click="onClickOrder('received')">
                <div class="icon_img_box">
                    <div class="dot" v-if="userBasicInfo.order_num.received > 0">{{userBasicInfo.order_num.received}}</div>
                <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/received.png" class="icon_img icon_img_margin_b" alt="" />
                </div>
                <div class="text">待收货</div>
            </div>
            <div class="item_3 border_right_gray" @click="onClickOrder('evaluate')">
                <div class="icon_img_box">
                    <div class="dot" v-if="userBasicInfo.order_num.evaluate > 0">{{userBasicInfo.order_num.evaluate}}</div>
                    <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/evaluate.png" class="icon_img icon_img_margin_b" alt="" />
                </div>
                <div class="text">待评价</div>
            </div>
            <div class="item_3 border_right_gray" @click="onClickOrder('return')">
                <div class="icon_img_box">
                    <div class="dot" v-if="userBasicInfo.order_num.return > 0">{{userBasicInfo.order_num.return}}</div>
                    <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/afterSale.png" class="icon_img" style="width:50rpx;margin-bottom: -5rpx;" alt="" />
                </div>
                <div class="text">退换/售后</div>
            </div>
            <div class="item_3" @click="onClickOrder('all')">
                <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/allOrder.png" class="icon_img" style="width:50rpx;margin-bottom: -5rpx;" alt="" />
                <div class="text">所有订单</div>
            </div>
        </div>

        <div class="section-gap"></div>

        <div class="feature-wrap">
            <div class="feature-item large-text after-line" v-if="hasLogin && userBasicInfo && userBasicInfo.level !== 3" @click="onClickPartner">
                <span class="icon grey-color">&#xe62d;</span>
                <span class="name">申请成为城市合伙人</span>
            </div>

            <div class="feature-item large-text after-line" style="position:relative;" v-if="hasLogin && userBasicInfo && userBasicInfo.mobile">
                <span class="icon grey-color">&#xe690;</span>
                <span class="name">修改个人手机号</span>
                <wx-component behavior="button"
                    class="" style="position:absolute;width:92%;height:100%;background:none;border:none;"
                    open-type="getPhoneNumber"
                    @getphonenumber="onGetPhoneNumber">
                </wx-component>
            </div>
            <!-- <div @click="toMobileBind" class="feature-item large-text after-line" v-if="hasLogin && userBasicInfo && userBasicInfo.mobile">
                <span class="icon grey-color">&#xe690;</span>
                <span class="name">修改个人手机号</span>
            </div> -->
            <div class="feature-item large-text after-line" @click="showWechatPop">
                <span class="icon grey-color">&#xe61d;</span>
                <span class="name">我的众筹</span>
            </div>
            <div class="feature-item large-text after-line" @click="toUserDiscount">
                <span class="icon grey-color">&#xe69b;</span>
                <span class="name">优惠券</span>
            </div>
            <div @click="onClickAddressList" class="feature-item large-text after-line">
                <span class="icon grey-color">&#xe635;</span>
                <span class="name">地址管理</span>
            </div>
            <div @click="onClickHelp" class="feature-item large-text after-line">
                <span class="icon grey-color">&#xe60d;</span>
                <span class="name">帮助中心</span>
            </div>
            <!-- <div v-if="service && service.mobile" @click="onClickCustomerService" class="feature-item large-text after-line">
                <span class="icon grey-color">&#xe68b;</span>
                <span class="name">电话客服</span>
            </div> -->
        </div>

         <!-- 微信客服弹窗 -->
        <van-popup v-model="wechatPopVisible" class="wechat-pop">
            <div class="inner-box">
                <div class="content-box">
                    <div class="title">提示</div>
                    <!-- 内容未定 -->
                    <div class="content">
                        点击“确认”后发送“2”
                    </div>
                </div>
                <div class="btns">
                    <button class="btns__btn" @click="hideWechatPop">取消</button>
                    <div class="line"></div>
                    <wx-button class="btns__btn" open-type="contact" @click="hideWechatPop">确认</wx-button>
                </div>
            </div>
        </van-popup>

        <BottomTab value="user" />
    </div>
</template>

<script lang="ts">
import store from '@/store';
import {
    EMPTY_LIST,
    ROUTE_NAME,
    STATUS_LOGIN_LOGINED,
} from '@/lib/constant';
import BottomTab from '@/components/nav/bottomTab.vue';
import { api } from '@/lib/api';
import { Component, Vue } from 'vue-property-decorator';
import { Route } from 'vue-router';

Component.registerHooks([
    'beforeRouteEnter',
]);

@Component({
    name: 'UserHome',
    components: {
        BottomTab,
    },
})
export default class UserHome extends Vue {
    public levalList = [
        '会员',
        '老顾客',
        '城市合伙人',
    ];

    /** 微信客服弹窗 */
    public wechatPopVisible: any = false;

    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }

    /** 服务信息 */
    public get service() {
        return store.state.utils.service;
    }

    public get hasLogin() {
        return store.state.auth.hasLogin;
    }
    public get initOrderCount() {
        const wrap = store.state.order.list.init || EMPTY_LIST;
        return wrap.list.length;
    }

    /** 已经省多少钱 */
    // public get discount() {
    //     const userBasicInfo = this.userBasicInfo;
    //     return userBasicInfo ? currency(userBasicInfo.discount) : '';
    // }

    /** 登录 */
    public onClickLogin() {
        const basicInfo = this.userBasicInfo;
        if (basicInfo && (!basicInfo.nickname || !basicInfo.avatar)) {
            store.commit('auth/showUserInfo', true);
            return;
        }
        if (basicInfo && !basicInfo.mobile) {
            store.commit('auth/showBindMobile', true);
        }
    }

    /**
     *  新增 修改手机号
     */
    public async onGetPhoneNumber(e: { detail: any }) {
        if (e.detail.errMsg.indexOf('getPhoneNumber:ok') >= 0) {
            store.commit('utils/startRequest');
            const res = await store.dispatch('auth/getphoneNumberIv', {
                encryptedData: e.detail.encryptedData,
                iv: e.detail.iv,
            });
            if (res.statusCode === 200 && res.data.status === 0) {
                const rdata = await store.dispatch('user/bindMobile', {
                    serialNumber: res.data.data.phoneNumber,
                    code: '',
                });
                store.commit('utils/endRequest');
                if (rdata.status === 0) {
                    await store.dispatch('getUserBasicInfo', true);
                    wx.showToast({
                        title: '修改成功',
                    });
                }
                
            } else {
                wx.showToast({
                    title: res.data.message,
                    icon: 'none',
                });
            }
            store.commit('utils/endRequest');
        }
    }



    /**
     * 点击申请成为合伙人
     */
    public onClickPartner() {
        // wx.navigateTo({
        //     url: '/pages/partner_detail/main',
        // });
        api.push({
            name: ROUTE_NAME.PARTNER_DETAIL,
        });
    }

    public onClickAddressList() {
        // wx.navigateTo({
        //     url: '/pages/address_list/main',
        // });
        api.push({
            name: ROUTE_NAME.ADDRESS_LIST,
        });
    }

    public onClickHelp() {
        // wx.navigateTo({
        //     url: '/pages/feed_back/main',
        // });
        api.push({
            name: ROUTE_NAME.FEEDBACK_INDEX,
        });
    }

    /**
     * 点击订单
     */
    public onClickOrder(status: string) {
        // wx.navigateTo({
        //     url: `/pages/order_list/main?status=${status}`,
        // });
        api.push({
            name: ROUTE_NAME.ORDER_LIST,
            query: {
                status,
            },
        });
    }

    // 去代金券页
    public toUserDiscount() {
        // wx.navigateTo({
        //     url: '/pages/coupon_select/main',
        // });
        api.push({
            name: ROUTE_NAME.MALL_COUPON_SELECT,
        });
    }

    // onClickCrowd() {
    //     wx.navigateTo({
    //         url: '/pages/crowd_list/main',
    //     });
    // },
    /**
     * 打开微信客服弹窗
     */
    public showWechatPop() {
        this.wechatPopVisible = true;
    }

    /**
     *  隐藏微信客服弹窗
     */
    public hideWechatPop() {
        this.wechatPopVisible = false;
    }

    public toMobileBind() {
        api.push({
            name: ROUTE_NAME.USER_MOBILE,
        });
    }

    /**
     *   新增  获取用户信息
     */
    public async onGetUserInfo(e: { detail: any }) {
        if (wx.canIUse('getUserProfile')) {
            const userInfoRes = await api.getUserProfile({
                desc: '用于展示和提供更好的服务', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
            }).catch(err => err);
            if (userInfoRes.errMsg.indexOf('getUserProfile:ok') > -1) {
                var userInFo = JSON.parse(userInfoRes.rawData)               
                this.updateUserInfo(userInfoRes.encryptedData, userInfoRes.iv,userInFo.avatarUrl,userInFo.nickName);
            }
            return;
        }
        if (wx.canIUse('getUserInfo')){
            const userInfoRes = await api.getUserInfo({
                withCredentials: true,
            }).catch(err => err);
           
            var userInFo = JSON.parse(userInfoRes.rawData)
            this.updateUserInfo(userInfoRes.encryptedData, userInfoRes.iv,userInFo.avatarUrl,userInFo.nickName);
        }
    }
    public async updateUserInfo(encryptedData: string, iv: string, avatar: string,nickname: string) {
        
        store.commit('utils/startRequest');
        await store.dispatch('utils/syncWechat', {
            encryptedData,
            iv,
        });
        await store.dispatch('user/UpdateUserInfo', {
            avatar:avatar,
            nickname:nickname,
            forceUpdate:true
        });
        store.commit('utils/endRequest');

    }



    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        store.commit('utils/startRequest');
        await store.dispatch('utils/getPageConfig');
        store.commit('utils/endRequest');
        next();
    }

}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.updateUserInfo{
    padding: 8rpx 15rpx;
    border: 1rpx solid #FEABB0;
    color: #FEABB0;
    border-radius: 20rpx;
    font-size: 28rpx;
    margin-right: 20rpx;

    .updateUserInfo_btn{
        border: none!important;
        background: none!important;
    }
}

.border_right_gray{
    border-right: 1px solid #F2F2F2;
}
.order_box{
    width: 92%;
    // box-sizing: border-box;
    // background-color: #f8f8f8;
    background-color: #ffffff;
    margin: 10px auto;
    padding:10px 0px;
    margin-top: -50rpx;
    .item_3 {
        display: inline-block;
        width: 16%;
        // margin: 10px 0;
        margin: 5px 0;
        text-align: center;
        .text{
            font-size: 10px;
        }
        .icon {
            font-size: 24px;
            margin-bottom: 10px;
            color: @color-red;
        }
    }
    .icon_img {
        width: 54rpx;
        margin: 0rpx;
    }
    .icon_img_margin_b{
        margin-bottom: 6rpx!important;
    }
    .icon_img_box{
        position: relative;
        width: 100%;
        height: 66rpx;
    }
    .dot{
        position: absolute;
        top: -12rpx;
        left: 60%;
        width: 26rpx;
        height: 26rpx;
        line-height: 28rpx;
        border-radius: 50%;
        background-color: #EB1412;
        color: #ffffff;
        font-size: 8px;
        margin: 0rpx;
        padding: 0rpx;
    }
}

.user-home {
    min-height: 100%;
    padding-bottom: @height-tabbar;
    background-color: @default-bg-color;
    box-sizing: border-box;

    .user-info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        // padding: 15px 15px 80rpx;
        // background-color: @primary-color;
        padding: 15px 15px 50rpx;
        background: linear-gradient(#FEEAE9,#FEF4F3);
        border-radius: 0 0 20px 20px;
        .info {
            // display: flex;
            align-items: center;
        }
        .avatar {
            width: 128rpx;
            height: 128rpx;
            border-radius: 50%;
            background-color: @white-color;
        }
        .name {
            padding: 10px;
            // color: @white-color;
            color: #8B8585;
        }
        .member-tag {
            padding: 0 14rpx;
            color: @black-color;
            background-color: #DE9F5B;
            border-radius: 8rpx;
        }
        .copy-btn {
            .text-tiny();
            padding: 2rpx 6rpx;
            color: #FFC3C4;
            border: 1rpx solid #FFC3C4;
            border-radius: 8rpx;
        }
        .btn-login {
            justify-self: end;
        }
        // .btn-login {
        //     margin-left: 10px;
        //     padding: @button-large-padding-v 20px;
        // }
    }
    .order-wrap {
        width: 690rpx;
        margin-left: auto;
        margin-right: auto;
        margin-top: -50rpx;
        border-radius: 8rpx;
        background-color: @white-color;
        .status-item {
            position: relative;
            float: left;
            width: 25%;
            padding: 24rpx 0;
            box-sizing: border-box;
            &__dot {
                position: absolute;
                right: 20px;
                top: 8px;
                width: 6px;
                height: 6px;
                background-color: @color-red;
                border-radius: 50%;
            }
            .icon {
                font-size: 56rpx;
                line-height: 56rpx;
                &.yellow {
                    color: #DE9F5B;
                }
            }
            .label {
                padding-top: 8rpx;
                .text-small();
            }
        }
    }
    .feature-wrap {
        width: 690rpx;
        margin-left: auto;
        margin-right: auto;
        background-color: @white-color;
        border-radius: 8rpx;
        .feature-item {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 28rpx 15px;
            .icon {
                display: inline-block;
                font-size: 48rpx;
            }
            .name {
                padding-left: 10px;
                .text-normal();
            }
        }
    }
    .wechat-pop {
        .inner-box {
            width: 262px;
            background: @white-color;
            border-radius: 5px;
            .content-box {
                box-sizing: border-box;
                width: 100%;
                padding: 5px 20px;
                text-align: center;

                .title {
                    font-size: 18px;
                    color: #101010;
                    padding-top: 20px;
                }
                .content {
                    padding: 20px 0;
                    font-size: 15px;
                    color: #a49fa5;
                }
            }
            .btns {
                display: flex;
                flex-direction: row;
                align-items: center;
                width: 100%;
                height: 50px;
                line-height: 50px;
                border-top: 2rpx solid #e4dfe5;

                &__btn {
                    flex: 1;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    font-size: 32rpx;
                }

                .line {
                    width: 1px;
                    height: 100%;
                    background: #e4dfe5;
                }
            }
        }
    }
}

</style>
